<template>
	<div class="fundsprod">
		<el-card class="box-card">
			<el-button slot="header" type="primary">
				<span>产品日历</span>
			</el-button>
			<div>
				<div class="titles">
					{{ nowDate }}
				</div>

				<div class="chajian">
					<div class="lists" style="justify-content: flex-start">
						<el-form>
							<el-form-item label="选择月份：">
								<el-date-picker
									v-model="selectDate"
									type="month"
									placeholder="选择月"
									size="medium"
									format="yyyy-MM"
									@change="getQueryList()"
									:editable="false"
								>
								</el-date-picker>
							</el-form-item>
							<el-form-item label="负责人：">
								<el-select v-model="personLiable" filterable @change="getQueryList()" size="medium">
									<el-option key="" label="--全部--" value=""> </el-option>
									<el-option
										v-for="(item, index) in managerList"
										:key="index + 'a'"
										:label="item.personLiableName"
										:value="item.personLiableId"
									/>
								</el-select>
							</el-form-item>
						</el-form>
					</div>
					<div class="lists" style="justify-content: flex-end; width: 40%">
						<el-checkbox-group v-model="checkList" :min="1" @change="getQueryList">
							<el-checkbox label="1" :disabled="checkboxStatus && checkList.includes(`1`)"
								>新增
								<div style="height: 10px; width: 18px; background-color: #6cb2ec; display: inline-flex; margin-right: 2px"></div
							></el-checkbox>
							<el-checkbox label="2" :disabled="checkboxStatus && checkList.includes(`2`)"
								>变更
								<div style="height: 10px; width: 18px; background-color: #69bec1; display: inline-flex; margin-right: 2px"></div
							></el-checkbox>
							<el-checkbox label="3" :disabled="checkboxStatus && checkList.includes(`3`)"
								>终止
								<div style="height: 10px; width: 18px; background-color: #e9a846; display: inline-flex; margin-right: 2px"></div
							></el-checkbox>
							<el-checkbox label="4" :disabled="checkboxStatus && checkList.includes(`4`)"
								>清算
								<div style="height: 10px; width: 18px; background-color: #f56c6c; display: inline-flex; margin-right: 2px"></div
							></el-checkbox>
						</el-checkbox-group>
					</div>
				</div>

				<div v-if="isShow">
					<el-calendar v-model="selectDate" v-loading="calendarLoading">
						<template slot="dateCell" slot-scope="{ data }">
							<div :class="data.isSelected ? 'is-selected' : ''" class="dates1">
								{{
									data.day
										.split('-')
										.slice(1)
										.join('-')
								}}
							</div>

							<div v-if="itemView['' + data.day + '']" style="width: 84%; margin-top: 25px">
								<div v-for="(item, index) in itemView['' + data.day + '']" :key="index + 'a'">
									<div v-if="index < 1">
										<el-popover trigger="click" placement="top-start" width="500">
											<p>
												{{
													item.changeType == '1'
														? '新增'
														: item.changeType == '2'
														? '变更'
														: item.changeType == '2'
														? '清算'
														: '终止'
												}}日期&nbsp;&nbsp;&nbsp;&nbsp;
												{{ item.changeDate }}
											</p>
											<p>产品代码&nbsp;&nbsp;&nbsp;&nbsp; {{ item.fundCode }}</p>
											<p>
												产品名称&nbsp;&nbsp;&nbsp;&nbsp;
												{{ item.fundFullName }}
											</p>
											<p>
												{{
													item.changeType == '1'
														? '新增'
														: item.changeType == '2'
														? '变更'
														: item.changeType == '2'
														? '清算'
														: '终止'
												}}备注&nbsp;&nbsp;&nbsp;&nbsp;
												{{ item.changeRemark }}
											</p>
											<p>
												{{
													item.changeType == '1'
														? '新增'
														: item.changeType == '2'
														? '变更'
														: item.changeType == '2'
														? '清算'
														: '终止'
												}}内容&nbsp;&nbsp;&nbsp;&nbsp;
												{{ item.changeText }}
											</p>
											<div slot="reference" :class="'test' + item.changeType + ' ellipsis'" @click.stop="listClick">
												<span v-if="item.fundName && item.fundName.length > 4"
													>{{ item.fundCode }}-{{ item.fundName.replace('景顺长城', '').substr(0, 4) + '.' }}</span
												>
												<span v-else
													>{{ item.fundCode }}-{{
														item.fundName ? item.fundName.replace('景顺长城', '') : item.fundName
													}}</span
												>
											</div>
										</el-popover>
									</div>

									<div v-if="index == 1">
										<el-popover trigger="click" placement="bottom">
											<div v-for="(item, index2) in itemView['' + data.day + '']" :key="index2 + 'b'">
												<div v-if="index2 > 0">
													<el-popover trigger="click" placement="top" width="500">
														<span>
															<p>
																{{
																	item.changeType == '1'
																		? '新增'
																		: item.changeType == '2'
																		? '变更'
																		: item.changeType == '2'
																		? '清算'
																		: '终止'
																}}日期&nbsp;&nbsp;&nbsp;&nbsp;
																{{ item.changeDate }}
															</p>
															<p>
																产品代码&nbsp;&nbsp;&nbsp;&nbsp;
																{{ item.fundCode }}
															</p>
															<p>
																产品名称&nbsp;&nbsp;&nbsp;&nbsp;
																{{ item.fundFullName }}
															</p>
															<p>
																{{
																	item.changeType == '1'
																		? '新增'
																		: item.changeType == '2'
																		? '变更'
																		: item.changeType == '2'
																		? '清算'
																		: '终止'
																}}备注&nbsp;&nbsp;&nbsp;&nbsp;
																{{ item.changeRemark }}
															</p>
															<p>
																{{
																	item.changeType == '1'
																		? '新增'
																		: item.changeType == '2'
																		? '变更'
																		: item.changeType == '2'
																		? '清算'
																		: '终止'
																}}内容&nbsp;&nbsp;&nbsp;&nbsp;
																{{ item.changeText }}
															</p>
														</span>
														<div slot="reference" :class="'test' + item.changeType + ' ellipsis'" @click.stop="listClick">
															<span v-if="item.fundName && item.fundName.length > 4"
																>{{ item.fundCode }}-{{
																	item.fundName.replace('景顺长城', '').substr(0, 4) + '...'
																}}</span
															>
															<span v-else
																>{{ item.fundCode }}-{{
																	item.fundName ? item.fundName.replace('景顺长城', '') : item.fundName
																}}</span
															>
														</div>
													</el-popover>
												</div>
											</div>
											<div slot="reference" class="ellipsis vlibNode" @click.stop="listClick">
												<span><i class="el-icon-arrow-down">点击查看更多</i></span>
											</div>
										</el-popover>
									</div>
								</div>
							</div>
						</template>
					</el-calendar>
				</div>
				<div v-else></div>
			</div>
		</el-card>
	</div>
</template>
<script>
	import { prodCale } from '@/api/productApi/home'
	import { fundAll } from '@/api/productApi/infoMain'
	import { dateFormatter } from '@/utils/timer'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				selectDate: new Date(),
				personLiable: '',
				checkList: ['1', '2', '3', '4'],
				calendarLoading: false,
				isShow: true,
				itemView: {},
				managerList: []
			}
		},
		mounted() {
			this.getFund()
			this.getQueryList()
		},

		computed: {
			nowDate() {
				return `${this.selectDate.getFullYear()}年${this.selectDate.getMonth() + 1}月`
			},
			checkboxStatus() {
				return !(this.checkList.length > 1)
			},
			...mapGetters(['name'])
		},

		watch: {
			selectDate(value, newvalue) {
				if (new Date(value).getFullYear() !== new Date(newvalue).getFullYear() || new Date(value).getMonth() !== new Date(newvalue).getMonth()) {
					this.getQueryList()
				}
			}
		},

		methods: {
			getFund() {
				fundAll({ fundRaiseTypes: ['1', '2'] }).then(res => {
					if (res.msgCode === 'Y') {
						this.managerList = res.data.body.filter(item => item.personLiableId && item.personLiableName)
					}
				})
			},

			listClick(event) {},

			// 切换负责人
			getQueryList() {
				const selectDateVal = dateFormatter('yyyy-MM', this.selectDate)
				// 计算日期
				const startDate = new Date(selectDateVal + '-01 00:00:00')
				startDate.setDate(startDate.getDate() - 6)
				const endDate = new Date(selectDateVal + '-01 00:00:00')
				endDate.setDate(endDate.getDate() + 45)
				this.calendarLoading = true
				const params = {}
				params.startTime = dateFormatter('yyyyMMdd', startDate)
				params.endTime = dateFormatter('yyyyMMdd', endDate)
				params.checkList = this.checkList
				params.personLiable = this.personLiable
				this.isShow = false
				prodCale(params).then(res => {
					this.calendarLoading = false
					if (res.msgCode === 'Y') {
						const list = res.data.body
						const views = {}
						if (list != null && list.length > 0) {
							for (let i = 0; i < list.length; i++) {
								const item = list[i]
								let key = item.changeDate
								key = key.substring(0, 4) + '-' + key.substring(4, 6) + '-' + key.substring(6, 8)
								let value = views[key]
								if (value != null) {
									if (this.cuserId === item.personLiable) {
										value.splice(0, 0, item)
									} else {
										value.push(item)
									}
								} else {
									value = []
									value.push(item)
									views[key] = value
								}
							}
						}
						this.itemView = views
					}
					this.isShow = true
				})
			}
		}
	}
</script>
<style scoped  lang='scss' >
	.fundsprod {
		padding: 1% 0 0 1%;
		width: 71%;
		height: 650px;
		.el-card {
			width: 100%;
			border-radius: 0;
			height: 100%;
		}
		::v-deep .el-card__header {
			padding: 0 0px 0 0px;
			color: white;
			button {
				height: 31px;
				display: flex;
				align-items: center;
				width: 100%;
				border: none;
				border-radius: 0;
				outline: none;
				background-color: #3d78cc !important;
				span {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					span {
						width: 50%;
					}
					span:nth-child(2) {
						display: block;
						text-align: right;
					}
				}
			}
		}
		.clearfix:after {
			display: none;
		}
		.titles {
			font-size: 25px;
			color: #3d78cc;
			text-align: center;
		}
		.chajian {
			display: flex;
			justify-content: space-around;
			font-size: 13px;
			margin-top: 10px;
			.lists {
				display: flex;
				justify-content: flex-start;
				width: 60%;
				align-items: center;
			}
		}
		::v-deep .el-input__suffix {
			display: none !important;
		}

		::v-deep .el-calendar__header {
			display: none;
		}

		::v-deep .el-calendar__body {
			padding: 0;
			margin-top: 15px;
		}
	}
	::v-deep .el-calendar-day {
		height: 70.5px;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		position: relative;
		padding: 0;
	}
	.el-form {
		display: flex;
		.el-form-item {
			margin-bottom: 0;
			display: flex;
			margin-right: 30px;
		}
		::v-deep .el-form-item__label {
			text-align: left;
			margin-right: 0 !important;
			padding: 0 !important;
		}
		::v-deep .el-form-item__content {
			margin-left: 10px !important;
		}
	}
	.dates1 {
		position: absolute;
		right: 10px;
		top: 5px;
	}
	.test2 {
		background-color: #69bec1 !important;
		color: white;
		padding: 2px;
		margin-bottom: 2px;
		font-size: 12px;
	}
	.test1 {
		background-color: #6cb2ec !important;
		color: white;
		font-size: 12px;
		margin-bottom: 2px;
		padding: 2px;
	}
	.test4 {
		background-color: #f56c6c !important;
		color: white;
		padding: 2px;
		margin-bottom: 2px;
		font-size: 12px;
	}
	.test3 {
		background-color: #e9a846 !important;
		color: white;
		padding: 2px;
		font-size: 12px;
		margin-bottom: 2px;
	}
	.vlibNode {
		padding: 5px;
		color: rgb(53, 139, 159);
		font-size: 12px;
	}
</style>
